<template>
	<view class="container">
		<view @tap="dianji()">
			惦记我{{height}}
		</view>
		<view class="message" @tap="_hideeventMove">
			<uniDrawer  :visible="bol" >
				  <view style="padding:30upx;">
				        <view class="uni-title">抽屉式导航</view>
				    </view>
			</uniDrawer>
			<!-- 别人 -->
			<block v-for="(message,index) in message" :key="index" >
				<block v-for="(message,index) in message.result" :key="index">
				<view :class="[message.falg?'infome':'info']" >
						
							<view :class="[message.falg?'headImgme':'headImg']">
								<image src="/static/icos/QQ.png" mode=""></image>
							</view>
							<view   :class="[message.falg?'contentme':'content']">
								<view   :class="[message.falg?'bubbleme':'bubble']">{{message.content}}</view>
							</view>
						
				</view>
				</block>
			</block>
		
			<!-- 自己 -->
			<view class="info">
				<view class="headImg">
					<image src="/static/icos/QQ.png" mode=""></image>
				</view>
				<view class="content">
					<view class="bubble">吃饭没？</view>
				</view>
			</view>
			<view class="infome">
				<view class="headImgme">
					<image src="/static/icos/QQ.png" mode=""></image>
				</view>
				<view class="contentme">
					<view class="bubbleme">吃饭没？吃饭没？吃饭没？吃吃饭没？吃饭没？吃饭没？吃饭没？吃饭没？吃饭没？饭没？吃饭没？</view>
				</view>
			</view>
		</view>
			
		<view class="function">
			<view class="infofunction">
				<!-- 录音 -->
				<view class="recording">
					<image src="../../static/icos/yvyin.png" ></image>
				</view>
				<!-- 输入框 -->
				<view class="input">
					<input type="text" value="" />
				</view>
				<!-- 更多 -->
				<view class="move" @tap="eventMove">
					<image src="../../static/icos/move.png"></image>
				</view>
			</view>
			<view class="moveContent" :animation="animationdata">
				<view class="maxbox">
					<view class="buttonClass">
						<view class="">
							
						</view>
						<view class="">
							相机
						</view>
					</view>
					<view class="buttonClass">
						<view class="">
							
						</view>
						<view class="">
							相册
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDrawer from '../../components/packages/uni-drawer/uni-drawer.vue'
	export default {
		onLoad() {
			// #ifdef APP-PLUS
				this.animation = uni.createAnimation({
					duration:0
				})
				this.animation = this.animation
			// #endif
	
		},
		data() {
			return {
				animationdata:{},
				height:'0',
				message:[
					     {
					        "success": true,
					        "message": "数据获取成功",
					        "code": 200,
					        "result": [
					            {
					                "id": "ce396744622b4bdea554129fb7cbae1c",
					                "receiveUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "sendUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "content": "哈哈哈",
					                "state": 1,
					                "creationDate": "2019-08-01T03:51:39.000+0000",
					                "falg": true
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54231c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "在吗",
					                "state": 0,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54621c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "时间为什么要晚一个小时",
					                "state": 1,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54231c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "在吗",
					                "state": 0,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54621c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "时间为什么要晚一个小时",
					                "state": 1,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54231c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "在吗",
					                "state": 0,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54621c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "时间为什么要晚一个小时",
					                "state": 1,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54231c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "在吗",
					                "state": 0,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54621c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "时间为什么要晚一个小时",
					                "state": 1,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54231c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "在吗",
					                "state": 0,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            },
					            {
					                "id": "c2b513629c6c47f7b47b73016c54621c",
					                "receiveUserId": "23b17592702f4c64b21dba7ca7612f0d",
					                "sendUserId": "ca5fa2d68aae4c3b98c4ddf23c342ca2",
					                "content": "时间为什么要晚一个小时",
					                "state": 1,
					                "creationDate": "2019-07-31T08:16:49.000+0000",
					                "falg": false
					            }
					        ]
					    }
				],
				eventMovebol:false,
				bol:false
			};
		},
		methods:{
			dianji(){
				this.bol = !this.bol
				},
			eventMove(){
				this.animation.height(200).step()
				this.animationdata=this.animation.export()
				
			},
			_hideeventMove(){
				this.animation.height(0).step()
				this.animationdata=this.animation.export()
			}
			
		},
		 components: {uniDrawer}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}

	.message {
		display: flex;
		flex-direction: column;
		padding-left: 20upx;
		padding-top: 60upx;
		padding-right: 40upx;
		padding-bottom: 10upx;
		margin-bottom: 83upx;
	}

	/* 别人 */
	.info {
		display: flex;
		flex-direction: row;
		margin-bottom: 40upx;
	}

	.headImg image {
		width: 72upx;
		height: 72upx;
	}

	.content {
		position: relative;
		margin-left: 41upx;
		background-color: #eeeeee;
		max-width: 599upx;
		border-radius: 12upx;
	}

	.bubble {
		line-height: 20px;
		color: #333333;
		font-size: 14px;
		padding: 20upx;
		
	}

	.content:before {
		content: '';
		position: absolute;
		right: 100%;
		top: 27upx;
		width: 0;
		height: 0;
		border-width: 9px;
		border-style: solid;
		border-color: transparent;
		margin-bottom: -1px;
		border-right-width: 13px;
		border-right-color: #eeeeee;
	}

	/* 自己 */
	.infome {
		display: flex;
		margin-bottom: 40upx;
		flex-direction: row-reverse;

	}

	.headImgme image {
		width: 72upx;
		height: 72upx;
	}

	.contentme {
		position: relative;
		background-color: #4B7DFF;
		flex-direction: row-reverse;
		max-width: 599upx;
		margin-right: 41upx;
		border-radius: 12upx;
	}

	.bubbleme {
		line-height: 20px;
		color: #FFFFFF;
		font-size: 14px;
		padding: 20upx;
	}

	.contentme:before {
		content: '';
		position: absolute;
		left: 100%;
			top: 27upx;
		width: 0;
		height: 0;
		border-width: 9px;
		border-style: solid;
		border-color: transparent;
		margin-bottom: -1px;
		border-left-width: 13px;
		border-left-color: #4B7DFF;
	}
	
	/* 功能区 */
	.function{
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.recording{
		display: flex;
		align-items: center;
		align-content: center;
		padding: 20upx  20upx  20upx 0;
	}
	.recording image{
		width: 50upx;
		height: 50upx;
		
	}
	.input input{
		border:1px  solid #4B7DFF;
		height: 32upx;
		width: 536upx;
		padding-left: 10upx;
		padding-top: 20upx;
		padding-right: 10upx;
		padding-bottom: 20upx;
		border-radius: 12px;
	}
	.move{
		display: flex;
		align-items: center;
		align-content: center;
		padding: 20upx 0 20upx 20upx;
	}
	.move image{
		width: 50upx;
		height: 50upx;
	}
	.infofunction{
		padding: 10upx 20upx;
		display: flex;
		justify-content: space-between;
	}
	/* 更多 */
	.maxbox{
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
	}
	.moveContent{
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		height:0upx
	}
	.buttonClass{
		padding: 10upx;
	}
</style>
